<template>
  <section class="my-4 grid grid-cols-4 gap-2">
    <!-- Conditions -->
    <section class="col-span-1">
      <Condition
        v-for="(condition, idx) in studentSearchCondition"
        :onDelete="() => onDelete(idx)"
        :key="idx"
        v-if="isStudentList"
        >{{ condition }}</Condition
      >
      <Condition
        v-for="(condition, idx) in scoreSearchCondition"
        :onDelete="() => onDelete(idx)"
        :key="idx"
        v-if="!isStudentList"
        >{{ condition }}</Condition
      >
    </section>

    <!-- Search bar -->
    <div class="col-span-2">
      <label class="input input-bordered flex items-center gap-2 w-1/2 mx-auto">
        <input
          type="text"
          class="grow"
          placeholder="Search"
          v-model="searchString"
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="h-4 w-4 opacity-70 cursor-pointer"
          @click="onSearch"
        >
          <path
            fill-rule="evenodd"
            d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </label>
    </div>

    <!-- Action button -->
    <div class="col-span-1 text-center">
      <button class="btn btn-primary" @click="onClick" v-if="!isStudent">
        {{ route.name === 'score' ? 'Upload Score' : 'Add Student' }}
      </button>
    </div>
  </section>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';

import { useUserStore } from '@/stores/user';
import { useToast } from 'vue-toastification';
import { useSearchStore } from '@/stores/search';

import Condition from './Condition.vue';

const userStore = useUserStore();
const { studentSearchCondition, scoreSearchCondition } = storeToRefs(
  useSearchStore()
);

const { isStudent } = storeToRefs(userStore);

const route = useRoute();
const router = useRouter();
const toast = useToast();

const isStudentList = computed(() => route.name === 'student');

function onClick() {
  if (route.name === 'score') {
    router.push({ name: 'score-upload' });
    return;
  }

  router.push({ name: 'student-create' });
}

const searchString = ref('');

function onSearch() {
  if (!searchString.value.length) {
    toast.warning('Please enter a search query');
    return;
  }

  if (isStudentList.value) {
    studentSearchCondition.value = [
      ...studentSearchCondition.value,
      searchString.value.toLowerCase(),
    ];
  } else {
    scoreSearchCondition.value = [
      ...scoreSearchCondition.value,
      searchString.value.toLowerCase(),
    ];
  }

  searchString.value = '';
}

function onDelete(idx) {
  if (isStudentList.value) {
    studentSearchCondition.value.splice(idx, 1);
  } else {
    scoreSearchCondition.value.splice(idx, 1);
  }
}
</script>
